<!--
 * @FileDescription: 图片切换组件
 * @Author: 小威吃饱了
 * @Date: 2022/5/29
 * @LastEditors: 小威吃饱了
 * @LastEditTime: 2022/5/29
 -->
<template>
  <div>
    <div id="banner">
      <img :src="imgurl" v-if="isbanner" />
    </div>
  </div>
</template>
<script>
var i = 2
export default {
  name: 'MenuBanner',
  props: {},
  data() {
    return {
      imgurl: require('@/assets/equips/Sakura/Fuji 75.jpg'), //banner初始照片
      isbanner: 'true' //banner切换的触发值
    }
  },
  mounted() {
    //切换图片
    setInterval(this.bannerfade, 5000) 
    setInterval(this.imglz, 5000)
    setInterval(this.bannerfade, 5000)
    console.log("图片切换（挂载）完成");
  },
  methods: {
    bannerfade: function () { 
      this.isbanner = !this.isbanner
      console.log('banner切换')
    },
    imglz: function () {
      //  图片轮转
      switch (i) {
        case 1:
          this.imgurl = require('@/assets/equips/Matrix/2.0 Additional.jpg')
          i++
          break
        case 2:
          this.imgurl = require('@/assets/equips/Matrix/IM+.jpg')
          i++
          break
        case 3:
          this.imgurl = require('@/assets/equips/Sam/S68M.jpg')
          i++
          break
        case 4:
          this.imgurl = require('@/assets/equips/Sam/S68M.jpg')
          i = 1
          break
      }
    }
  }
}
</script>
<style lang="less" scoped>
@keyframes fade {
  0% {
    margin-left: -2vw;
    opacity: 0;
  }
  100% {
    margin-left: 0px;
    opacity: 1;
  }
}
#banner img {
  margin-top:4vh;
  width: 100vw;
  height: 20vh;
  border-radius: 2%;
  animation: fade 1s ease 0s;
}
h2 {
  margin-top: 10px;
  margin-left: 5px;
  font-size: 20px;
  border-bottom: 5px solid rgb(255, 0, 0);
}
</style>
